<template>
  <view>
    <view class="cu-bar bg-blue search fixed">
      <view
        class="cu-avatar round"
        :style="'background-image:url(' + userInfo.avatar + ');'"
      ></view>
      <view class="content">首页</view>
      <view class="action"
        ><text @click="toPublishPage" class="cuIcon-add"></text
      ></view>
    </view>
    <view style="height: 100rpx"></view>
    <view
      class="cu-card case no-card margin-tb-sm"
      @click="toImageDetails(item.id)"
      v-for="(item, index) in imagesPageInfo.records"
      :key="index"
    >
      <view class="cu-item shadow">
        <view class="image">
          <image :src="item.url" mode="aspectFill" class="main-image"></image>
          <!-- <view class="cu-tag bg-blue">精选</view> -->
          <view class="cu-bar bg-shadeBottom">
            <text class="text-cut">{{ item.title }}</text>
          </view>
        </view>
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view
              class="cu-avatar round lg"
              :style="'background-image:url(' + item.creator.avatar + ');'"
            ></view>
            <view class="content flex-sub">
              <view class="text-grey">{{ item.creator.nickname }}</view>
              <view class="text-gray text-sm flex justify-between">
                {{ item.createTime }}
                <view class="text-gray text-sm">
                  <text class="cuIcon-attentionfill margin-lr-xs"></text>
                  {{ item.views }}
                  <text class="cuIcon-appreciatefill margin-lr-xs"></text>
                  {{ item.likes }}
                  <text class="cuIcon-messagefill margin-lr-xs"></text>
                  {{ item.comments }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="padding text-center text-gray" v-show="showNoMore"
      >没有更多内容了哦......</view
    >
  </view>
</template>

<script>
import { mapState } from "vuex";
import { fetchRecommendImagesApi } from "../../api/http.js";
import { checkTokenInStore } from "../../permission/index";
export default {
  data() {
    return {
      imagesPageInfo: {
        current: 1,
        size: 5,
        records: [],
        total: 0,
      },
      showNoMore: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  onLoad: function () {
    checkTokenInStore();
    this.refreshImages();
  },
  onPullDownRefresh() {
    this.refreshImages();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (
      this.imagesPageInfo.current * this.imagesPageInfo.size >=
      this.imagesPageInfo.total
    ) {
      this.showNoMore = true;
      return;
    }
    this.fetchImages({
      page: this.imagesPageInfo.current + 1,
      limit: this.imagesPageInfo.size,
      status: 0,
    });
  },
  methods: {
    fetchImages(param) {
      fetchRecommendImagesApi(param).then((res) => {
        const _info = res.data;
        this.imagesPageInfo.current = _info.current;
        this.imagesPageInfo.size = _info.size;
        this.imagesPageInfo.records = this.imagesPageInfo.records.concat(
          _info.records
        );
        this.imagesPageInfo.total = _info.total;
      });
    },
    refreshImages() {
      this.imagesPageInfo = {
        current: 1,
        size: 5,
        records: [],
        total: 0,
      };
      this.fetchImages({
        page: this.imagesPageInfo.current,
        limit: this.imagesPageInfo.size,
        status: 0,
      });
    },
    toPublishPage() {
      uni.navigateTo({
        url: "../publish/publish",
        animationType: "slide-in-right",
        animationDuration: 500,
      });
    },
    toImageDetails(id) {
      uni.navigateTo({
        url: "../image_details/image_details?id=" + id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.main-image {
  height: 400rpx !important;
}
</style>
